<template>
	<view style="background-color: #3e52d5;">
	<view class="u-demo-block"  style="background-color: #3e52d5;">
		<!-- <u--image src="../../static/img/alert.png"></u--image> -->
		<c-lottie
		    ref="cLottieRef"
		    src='https://blog-leo021017.oss-cn-beijing.aliyuncs.com/security.json'
		    @LoopComplete="onLoopComplete" 
		    width="90%" height='90%' :loop="true">
		</c-lottie>
			
	</view>
  <view class="u-page" style="border-top-left-radius: 35rpx; background-color: white; border-top-right-radius: 35rpx;">
	  
	<u-toast ref="uToast"></u-toast>
	  
    <div class="item">
      <u-icon size="40" name="../../static/icon/video.svg"></u-icon>
      <div class="text">
        <text class="u-demo-block__title" style="font-size: 100%; font-weight: 800; color: black;">视频通话预警</text>
		<text class="u-demo-block__title" style="font-size: 80%;">准确识别并预警AI合成视频通话</text>
      </div>
      <div class="switch">
        <u-switch
			v-model="value1"
			@change="switch_change"
			space="3"
		></u-switch>
      </div>
    </div>
    <br />
    <div class="item">
      <u-icon size="40" name="../../static/icon/telephone.svg"></u-icon>
      <div class="text">
        <text class="u-demo-block__title" style="font-size: 100%; font-weight: 800; color: black;">电话预警</text>
        <text class="u-demo-block__title" style="font-size: 80%;">准确识别并预警AI合成语音通话</text>
      </div>
      <div class="switch">
        <u-switch
        	v-model="value2"
        	@change="switch_change"
			space="3"
        ></u-switch>
      </div>
    </div>
    <br />
    <div class="item">
	  <u-icon size="40" name="../../static/icon/msg.svg"></u-icon>
      <div class="text">
        <text class="u-demo-block__title" style="font-size: 100%; font-weight: bold; color: black;">短信预警</text>
        <text class="u-demo-block__title" style="font-size: 80%;">准确识别并预警诈骗短信</text>
      </div>
      <div class="switch">
        <u-switch
        	v-model="value3"
        	@change="switch_change"
			space="3"
        ></u-switch>
      </div>
    </div>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value1: true,
	  value2: false,
	  value3: true,
    }
  },
  methods: {
	  switch_change(e) {
		  if(e)
		  {
			  const params = 
			  {
				  type: 'success',
				  message: "成功打开预警！",
				   duration: 1000,
			  }
			  this.$refs.uToast.show({
					...params
			  })
		  }
		  else {
			  const params =
			  {
				  type: 'error',
				  message: "您已关闭预警！",
				   duration: 1000,
			  }
			  this.$refs.uToast.show({
					...params
			  })
		  }
	  },
  }
}
</script>

<style>
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*#ifndef APP-NVUE*/
.u-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
 /*#endif*/

.text {
  flex: 1;
}

/*#ifndef APP-NVUE*/
.switch input[type="checkbox"] {
  width: 50px;
  height: 30px;
}
 /*#endif*/
</style>
